import "./index.less"
import Echarts from "@/components/echarts"
import { useState, useRef, useEffect } from "react"
import lineOption from "../config/Line/lineOption"
import lineOption2 from "../config/Line/lineOption2"
import lineOption3 from "../config/Line/lineOption3"
import lineOption4 from "../config/Line/lineOption4"
import lineOption5 from "../config/Line/lineOption5"

import { useDispatch } from "react-redux"
import { handlerBread } from "@/redux/actions"
import { FundViewOutlined, } from '@ant-design/icons';
const BreadData:breadType[] = [{
    icon: <FundViewOutlined />,
    label: "Echarts",
    herf: ''
}, {
    icon: undefined,
    label: "折线图",
    herf: ''
}]


export default function Line() {

   const dispatch = useDispatch()


    function getEchartInstance(echartsInstance: echarts.ECharts) {
        lineOption5(echartsInstance).then((res) => {
            echartsInstance.setOption(res)
        })
    }
    
    useEffect(()=>{
       dispatch(handlerBread(BreadData))
    },[])


    return (
        <div className="Ecahrts_views flex">
            <Echarts myOption={lineOption} width={"32%"} height={"350px"} className={"LineChart"} />
            <Echarts myOption={lineOption2} width={"32%"} height={"350px"} className={"LineChart2"} />
            <Echarts myOption={lineOption3} width={"32%"} height={"350px"} className={"LineChart3"} />
            <Echarts myOption={lineOption4} width={"32%"} height={"350px"} className={"LineChart4"} />
            <Echarts width={"32%"} height={"350px"} className={"LineChart5"} refResult={getEchartInstance} />
        </div>
    )
}